.item {
   border-radius: 1rem;
   padding: 1.5rem;
   background: var(--bg-content);
   margin: 1rem;
   z-index: 100;
   cursor: pointer;
   border: 2px solid transparent;
   transition: background 0.3s ease, border 0.3s ease;
   position: relative;
   min-height: 6.5rem;

   border: 3px solid var(--bg-content-border);
   box-shadow: 4px 4px 0 0 var(--bg-content-border);

   &:hover {
      background: var(--bg-content-hover);
   }

   &:hover {
      background: var(--bg-content-hover);

      .text_container .text {
         opacity: 0.8;
      }

      .text_container:has(> .input:not(:focus)) .edit_icon {
         opacity: 1;
         transform: scale(1);
      }
   }

   .text_container {
      position: relative;
      cursor: text;
      display: inline-block;
      max-width: 100%;
      max-height: 100%;
      white-space: pre-wrap;
      border-radius: 0.7rem;
      background-color: var(--bg-content-border);

      .text {
         text-align: center;
         padding: 0.5rem 1.2rem;
         font-weight: 500;
         color: #e3e3e3;
         width: fit-content;
         word-wrap: break-word;
         max-height: 100%;
         max-width: 100%;
         overflow: hidden;
         min-width: 4rem;
         transition: all 0.3s ease;
      }

      .input {
         position: absolute;
         border-radius: 0.7rem;
         width: 0;
         height: 100%;
         opacity: 0;
         top: 0;
         left: 0;
         padding: 0.5rem 1.2rem;
         font-weight: 500;
         color: #e3e3e3;
         border: none;
         outline: none;
         background-color: inherit;
         font-size: inherit;
         font-family: inherit;
         resize: none;
         text-align: center;
         scrollbar-width: none;

         &:focus {
            width: 100%;
            height: 100%;
            opacity: 1;
         }
      }

      .edit_icon {
         position: absolute;
         top: -0.6rem;
         right: -1rem;
         font-size: 1.7rem;
         opacity: 0;
         transform: scale(0.7);
         display: flex;
         background-color: var(--bg-content);
         padding: 0.4rem;
         border-radius: 5rem;
         transition: all 0.3s ease;
         cursor: pointer;
         z-index: 10;
      }
   }
}

.checkbox {
   font-size: 20px;
   height: 10px;
   width: 10px;
   position: absolute;
   top: -1rem;
   right: 1rem;
   cursor: pointer;
   pointer-events: none;
   transition: all 0.2s ease;
   z-index: 100;

   /* Hide the default checkbox */
   input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
   }

   /* Create a custom checkbox */
   .checkmark {
      position: relative;
      top: 0;
      left: 0;
      height: 3rem;
      width: 3rem;
      border-radius: 50px;
      opacity: 0;
      transition: all 0.3s;
   }

   /* When the checkbox is checked, add a background */
   input:checked ~ .checkmark {
      background-color: var(--color-primary);
      /* background-color: #a5a5b0; */
      animation: keyframes-fill 0.5s;
      animation-direction: alternate;
      opacity: 1;
   }

   /* Create the checkmark/indicator (hidden when not checked) */
   .checkmark:after {
      content: "";
      position: absolute;
      display: none;
   }

   /* Show the checkmark when checked */
   input:checked ~ .checkmark:after {
      display: block;
   }

   /* Style the checkmark/indicator */
   .checkmark:after {
      left: 1.1rem;
      top: 0.7rem;
      width: 0.5rem;
      height: 0.5em;
      border: solid var(--bg-primary);
      border-width: 0 0.3rem 0.3rem 0;
      transform: rotate(45deg);
   }
}

@keyframes keyframes-fill {
   0% {
      transform: scale(0);
      opacity: 0;
   }

   50% {
      transform: scale(1.2) rotate(15deg);
   }
}
